<template>
  <el-dialog :visible.sync="visible" fullscreen @close="visible = false">
    <div class="dial">
      <div class="rotate">
        <!-- 绘制圆点 -->
        <div
          :class="'circle circle_' + index"
          v-for="(item, index) in circleList"
          :key="index"
          :style="{
            background: index % 2 == 0 ? colorCircleFirst : colorCircleSecond,
          }"
        ></div>
        <!-- 转盘图片 -->
        <img
          class="dish"
          src="@/assets/dial3.png"
          :style="{ transform: rotate_deg, transition: rotate_transition }"
        />
        <!-- 指针图片 -->
        <img class="pointer" src="@/assets/click.png" @click="start" />
      </div>
    </div>
  </el-dialog>
</template>

<script>
var light_timer; //灯光定时器

export default {
  name: "dial",
  data() {
    return {
      visible: false,
      circleList: [], //原点设置
      colorCircleFirst: "#FE4D32", //圆点颜色
      colorCircleSecond: "#fff", //圆点颜色
      cat: 60, //总共8个扇形区域，每个区域约45度
      isAllowClick: true, //是否能够点击
      rotate_deg: 0, //指针旋转的角度
      rotate_transition: "transform 3s ease-in-out", //初始化选中的过度属性控制
      data: null,
    };
  },

  components: {
    // Calendar: Calendar
  },
  created() {
    this.showcircleList();
  },

  watch: {},

  mounted() {},

  methods: {
    init(tel, mainType, data) {
      this.tel = tel;
      this.data = data;
      this.mainType = mainType;
      this.visible = true;
    },
    //绘制圆点设置
    showcircleList() {
      let circleList = [];
      for (var i = 0; i < 16; i++) {
        circleList.push(i);
      }
      this.circleList = circleList;
      this.light();
    },

    //闪动效果
    light: function () {
      var that = this;
      clearInterval(light_timer);
      light_timer = setInterval(function () {
        if (that.colorCircleFirst == "#FE4D32") {
          that.colorCircleFirst = "#fff";
          that.colorCircleSecond = "#FE4D32";
        } else {
          that.colorCircleFirst = "#FE4D32";
          that.colorCircleSecond = "#fff";
        }
      }, 300); //设置圆点闪烁的效果
    },

    async start() {
      this.rotating(this.data);
    },

    rotating(v) {
      if (!this.isAllowClick) return;
      this.isAllowClick = false;
      this.rotate_transition = "transform 3s ease-in-out";
      var rand_circle = 5; //默认多旋转5圈
      //   var winningIndex = Math.floor(Math.random() * 8); //获奖的下标   0-7   没有概率每个平均
      var randomDeg = 0;
      if (!v.PrizeResult) {
        let round = Math.random() - 0.5;
        if (round > 0) {
          randomDeg = 360 - 2 * 60;
        } else {
          randomDeg = 360 - 5 * 60;
        }
      } else {
        if (v.MainType == 1) {
          let round = Math.random();
          if (round <= 0.5) {
            randomDeg = 360 - 3 * 60;
          } else {
            randomDeg = 360;
          }
        } else {
          let round = Math.random() - 0.5;
          if (round > 0) {
            randomDeg = 360 - 60;
          } else {
            randomDeg = 360 - 4 * 60;
          }
        }
      }

      var deg = rand_circle * 360 + randomDeg; //将要旋转的度数  由于是顺时针的转动方向需要用360度来减
      this.rotate_deg = "rotate(" + deg + "deg)";
      var that = this;
      setTimeout( ()=> {
        that.isAllowClick = true;
        that.rotate_deg = "rotate(" + 0 + "deg)"; //定时器关闭的时候重置角度
        that.rotate_transition = "";
        that.visible = false;
        if (v.PrizeResult) {
          this.$message.success(`恭喜您，获得${v.PrizeName}`);
        } else {
          this.$message.error(`很遗憾~~啥也没有`);
        }
        setTimeout(()=>{
          that.$router.replace("/");
        },1000)
      }, 3500);
    },

    //设置概率
    set() {
      var winIndex;
      //方法1
      //   if (Math.floor(Math.random() * 100) < 30) {
      //     console.log("30%的概率,重在参与");
      //     winIndex = 2;
      //   } else if (Math.floor(Math.random() * 100) < 55) {
      //     console.log("25%的概率,5元");
      //     winIndex = 6;
      //   } else if (Math.floor(Math.random() * 100) < 75) {
      //     console.log("20%的概率,10元");
      //     winIndex = 1;
      //   } else if (Math.floor(Math.random() * 100) < 85) {
      //     console.log("10%的概率,20元");
      //     winIndex = 4;
      //   } else if (Math.floor(Math.random() * 100) < 92) {
      //     console.log("7%的概率,30元");
      //     winIndex = 3;
      //   } else if (Math.floor(Math.random() * 100) < 97) {
      //     console.log("5%的概率,50元");
      //     winIndex = 5;
      //   } else if (Math.floor(Math.random() * 100) < 99) {
      //     console.log("2%的概率,100元");
      //     winIndex = 7;
      //   } else if (Math.floor(Math.random() * 100) == 99) {
      //     console.log("1%的概率,IphoneX");
      //     winIndex = 0;
      //   }

      //方法2
      var __rand__ = Math.random();
      if (__rand__ < 0.3) winIndex = 2;
      else if (__rand__ < 0.55) winIndex = 6;
      else if (__rand__ < 0.75) winIndex = 1;
      else if (__rand__ < 0.85) winIndex = 4;
      else if (__rand__ < 0.92) winIndex = 3;
      else if (__rand__ < 0.97) winIndex = 5;
      else if (__rand__ < 0.99) winIndex = 7;
      else if ((__rand__ = 0.99)) winIndex = 0;

      return winIndex;
    },
  },

  computed: {},
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog {
  background: rgba(0, 0, 0, 0.5);
}
::v-deep .el-dialog__close {
  color: #fff !important;
}
.times {
  text-align: center;
  line-height: 2.2px;
  background: #fff;
}
.rotate {
  width: 1400px;
  height: 1400px;
  background: #ffbe04;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rotate .dish {
  width: 1300px;
  height: 1300px;
}

.pointer {
  width: 408px;
  height: 609px;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 圆点 */
.rotate .circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 32px;
  width: 32px;
  background: black;
}

.rotate .circle_0 {
  top: 16px;
  left: 584px;
}

.rotate .circle_1 {
  top: 36px;
  left: 860px;
}

.rotate .circle_2 {
  top: 150px;
  left: 1100px;
}

.rotate .circle_3 {
  top: 370px;
  left: 1280px;
}

.rotate .circle_4 {
  top: 600px;
  right: 20px;
}

.rotate .circle_5 {
  bottom: 490px;
  right: 40px;
}

.rotate .circle_6 {
  bottom: 242px;
  right: 165px;
}

.rotate .circle_7 {
  bottom: 92px;
  right: 362px;
}

.rotate .circle_8 {
  bottom: 12px;
  right: 612px;
}

.rotate .circle_9 {
  bottom: 76px;
  left: 422px;
}

.rotate .circle_10 {
  bottom: 222px;
  left: 192px;
}

.rotate .circle_11 {
  // bottom: 24px;
  // left: 560px;
}

.rotate .circle_12 {
  top: 540px;
  left: 20px;
}

.rotate .circle_13 {
  top: 900px;
  left: 45px;
}

.rotate .circle_14 {
  top: 240px;
  left: 172px;
}

.rotate .circle_15 {
  top: 94px;
  left: 352px;
}
</style>
